display:table-cell的应用[转]

Created at 2016-09-08 Updated at 2017-01-06 Category Front-End Tag CSS

display:table-cell属性简述

• display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用
• table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与loat:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性

display:table-cell与大小不固定元素的垂直居中

• 使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了

1
2
3
4
5
6
7
8
9
10
11
12

div{
  display:table-cell; 
  width:1em;
  height:1em;
  border:1px solid #beceeb; 
  font-size:144px; 
  text-align:center; 
  vertical-align:middle;
} 
div img{
  vertical-align:middle;
}

display:table-cell与两栏自适应布局

• display:table-cell可以用在两栏的自适应布局上
• 对于不认识display:table-cell属性的IE6/7呢，使用display:inline-block属性代替display:table-cell就完全ok

display:table-cell下的等高布局

• table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性
• table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性

• 原文出处